import React, { useState } from 'react'; // 导入React和useState
import { Tabs, Card } from 'antd'; // 导入Tabs和Card组件
import TodayGMVPage from './TodayGMVPage'; // 导入今日GMV页面
import ProductRankPage from './ProductRankPage'; // 导入商品销量排行页面

const { TabPane } = Tabs; // 获取Tabs的TabPane

const DataManagement = () => { // 数据管理与报表主组件
  // 当前激活的标签页key
  const [activeKey, setActiveKey] = useState('todaygmv'); // 默认显示今日GMV

  // 标签页切换回调
  const handleTabChange = (key) => {
    setActiveKey(key); // 设置当前激活标签页
  };

  return (
    <Card style={{ margin: 24 }}> {/* 外层卡片容器 */}
      <Tabs activeKey={activeKey} onChange={handleTabChange}> {/* 标签页组件 */}
        <TabPane tab="今日GMV" key="todaygmv"> {/* 今日GMV标签页 */}
          <TodayGMVPage /> {/* 嵌入今日GMV页面 */}
        </TabPane>
        <TabPane tab="商品销量排行" key="productrank"> {/* 商品销量排行标签页 */}
          <ProductRankPage /> {/* 嵌入商品销量排行页面 */}
        </TabPane>
      </Tabs>
    </Card>
  );
};

export default DataManagement; // 导出主组件 